<template>
	<view class="container">
		<view class="title">
			选择照片尺寸
		</view>
		<view class="item" :style="[item.is_recommend && {background: `linear-gradient(180deg, #ffdeb8 0%, #fff6ec 100%)`}]"
			v-for="item in dataList" :key="item.id" @click="navToUpload(item)">
			<image class="size-img" :src="item.image" mode="aspectFit" />
			<view class="item-detail">
				<view class="title">
					{{item.name}}
				</view>
				<view class="desc">
					{{item.describe}}
				</view>
			</view>
			<image class="icon" src="@/static/img/arrow-right.png" mode="aspectFit"></image>
		</view>
		<Loading v-if="dataList.length > 10" :status="loadingStatus" />
	</view>
</template>

<script>
	import Loading from '@/components/Loading.vue';
	import {
		PhotoApi
	} from '@/api';
	export default {
		components: {
			Loading
		},
		data() {
			return {
				pageNo: 1,
				loadingStatus: 'loading',
				dataList: [],
			};
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			getData() {
				if (this.loadingStatus === 'nomore')
					return
				this.loadingStatus = 'loading'
				this.$showLoading()
				PhotoApi.getImageSizeList({
						p: this.pageNo,
						size: 10,
					})
					.then(res => {
						this.dataList = this.dataList.concat(res.result.rows)
						uni.hideLoading()
						if (this.dataList.length === res.result.count)
							return this.loadingStatus = 'nomore'
						this.pageNo += 1
						this.loadingStatus = 'loadmore'
					})
					.catch(err => {
						uni.hideLoading()
						this.$showToast(err || '获取尺寸列表失败')
					})
			},
			navToUpload(data) {
				this.$navTo('pages/indexs/photo/upload_editing', {
					title: data.name,
					id: data.id
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 40rpx;
		padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}

	.title {
		color: #333333;
		font-size: 28rpx;
	}

	.item {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		padding: 60rpx 55rpx;
		border-radius: 20rpx;
		background: linear-gradient(180deg, #eff7ff 0%, #f4f9ff 100%);
		box-shadow: 0 8rpx 20rpx 0 #00000005;

		&:first-child {
			margin-top: 38rpx;
		}
	}

	.size-img {
		width: 100rpx;
		height: 100rpx;
	}

	.item-detail {
		margin-left: 30rpx;

		.title {
			color: #333333;
			font-size: 28rpx;
		}

		.desc {
			margin-top: 10rpx;
			color: #8a8a8a;
			font-size: 24rpx;
		}
	}

	.icon {
		margin-left: auto;
		width: 26rpx;
		height: 26rpx;
	}
</style>